
import React, { forwardRef, useContext, useEffect, useState, useCallback } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Select, Input, Row, Col, InputNumber } from 'antd';
import notify from "@utils/tip";
import CustomizeModal, { CustomizeModalContext, CustomizeModalButton } from "@common/presentational/CustomizeModal";
import { creatScheduleApply } from '@sagas/warehouse/schedule'
import { AllWarehouseSelect } from '@components/warehouse/AllWarehouseSelect'

const ScheduleApplyContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { warehouseId } = params
    const { callback } = props
    const [outWarehouseId, setOutWarehouseId] = useState()
    const [number, setNumber] = useState('')

    const handleOutIdChange = useCallback(value => {
        setOutWarehouseId(value)
    }, [])
    const handleNumberChange = useCallback(value => {
        setNumber(value)
    }, [])
    const dispatch = useDispatch()


    useEffect(() => {
        getSelection()
    }, [])

    const submit = () => {
        if (!number) {
            notify('请输入数量')
            return;
        }
        dispatch(creatScheduleApply({ 
            id: warehouseId,
            outWarehouseId: outWarehouseId,
            details: [{
                storageType: 2,
                storageKey: params.storage_key,
                quantity: number 
            }]
         }, () => {
            notify('申请调拨成功', 'success')
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>商品:</span>
                </Col>
                <Col span={20}>
                    <span className='ft-clr-d'>{params.name}</span>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>调出仓库:</span>
                </Col>
                <Col span={20}>
                    <AllWarehouseSelect
                        width='360px'
                        value={outWarehouseId}
                        onChange={handleOutIdChange}
                    />
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>数量:</span>
                </Col>
                <Col span={20}>
                    <InputNumber
                        min={1}
                        style={{ width: '360px' }}
                        max={999}
                        step={1}
                        value={number}
                        placeholder="请输入调拨数量"
                        onChange={handleNumberChange}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title='调拨' ref={ref}>
        <ScheduleApplyContent {...props} />
    </CustomizeModal>
))